<template>
	<view class="container">
		<view class="search-bar">
			<view class="search-box">
				<u-icon name="search" size="36" color="#909399"></u-icon>
				<input 
					type="text" 
					v-model="searchKeyword" 
					placeholder="搜索患者姓名/身份证号"
					confirm-type="search"
					@confirm="handleSearch"
				/>
				<u-icon v-if="searchKeyword" name="close" size="36" color="#909399" @click="clearSearch"></u-icon>
			</view>
			<view class="filter-btn" @click="showFilter = true">
				<u-icon name="list" size="40" color="#3c9cff"></u-icon>
			</view>
		</view>
		
		<view class="tabs">
			<view 
				class="tab-item" 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="{ active: currentTab === index }"
				@click="switchTab(index)"
			>
				<text>{{ tab.name }}</text>
				<text class="count" v-if="tab.count > 0">({{ tab.count }})</text>
			</view>
		</view>
		
		<view class="patient-list" v-if="patientList.length > 0">
			<view 
				class="patient-item" 
				v-for="(item, index) in patientList" 
				:key="index"
				@click="goToPatientDetail(item.id)"
			>
				<image class="avatar" :src="item.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
				<view class="info">
					<view class="name-row">
						<text class="name">{{ item.name }}</text>
						<text class="tag" :class="item.gender === '男' ? 'male' : 'female'">{{ item.gender }}</text>
						<text class="age">{{ item.age }}岁</text>
					</view>
					<view class="id-row">
						<text class="id-label">ID:</text>
						<text class="id-value">{{ item.patientId }}</text>
					</view>
					<view class="diagnosis-row">
						<text class="diagnosis">{{ item.diagnosis || '暂无诊断信息' }}</text>
					</view>
					<view class="meta-row">
						<text class="time">最近就诊: {{ item.lastVisit }}</text>
						<text class="risk" :class="getRiskClass(item.riskLevel)">{{ getRiskText(item.riskLevel) }}</text>
					</view>
				</view>
				<view class="actions">
					<view class="action-btn" @click.stop="callPatient(item.phone)">
						<u-icon name="phone" size="40" color="#3c9cff"></u-icon>
					</view>
					<view class="action-btn" @click.stop="messagePatient(item.id)">
						<u-icon name="chat" size="40" color="#19be6b"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view class="empty-state" v-else>
			<image src="/static/empty.png" mode="aspectFit"></image>
			<text>暂无患者数据</text>
		</view>
		
		<u-popup :show="showFilter" mode="bottom" @close="showFilter = false">
			<view class="filter-popup">
				<view class="filter-header">
					<text>筛选条件</text>
					<view @click="resetFilter">
						<u-icon name="reload" size="36" color="#909399"></u-icon>
						<text>重置</text>
					</view>
				</view>
				
				<view class="filter-section">
					<view class="section-title">风险等级</view>
					<view class="tag-list">
						<view 
							class="filter-tag" 
							v-for="(item, index) in riskLevels" 
							:key="index"
							:class="{ active: filter.riskLevel === item.value }"
							@click="filter.riskLevel = filter.riskLevel === item.value ? '' : item.value"
						>
							{{ item.label }}
						</view>
					</view>
				</view>
				
				<view class="filter-section">
					<view class="section-title">年龄段</view>
					<view class="tag-list">
						<view 
							class="filter-tag" 
							v-for="(item, index) in ageRanges" 
							:key="index"
							:class="{ active: filter.ageRange === item.value }"
							@click="filter.ageRange = filter.ageRange === item.value ? '' : item.value"
						>
							{{ item.label }}
						</view>
					</view>
				</view>
				
				<view class="filter-section">
					<view class="section-title">随访状态</view>
					<view class="tag-list">
						<view 
							class="filter-tag" 
							v-for="(item, index) in followupStatus" 
							:key="index"
							:class="{ active: filter.followupStatus === item.value }"
							@click="filter.followupStatus = filter.followupStatus === item.value ? '' : item.value"
						>
							{{ item.label }}
						</view>
					</view>
				</view>
				
				<view class="filter-actions">
					<view class="cancel-btn" @click="showFilter = false">取消</view>
					<view class="confirm-btn" @click="applyFilter">确定</view>
				</view>
			</view>
		</u-popup>

		<!-- 底部安全区域 -->
		<view class="safe-area-bottom"></view>

		<!-- 自定义tabBar -->
		<custom-tabbar v-if="showCustomTabBar"></custom-tabbar>
	</view>
</template>

<script>
//	import tabBarMixin from '@/common/mixins/tab-bar-mixin.js';

	export default {
		//mixins: [tabBarMixin],
		data() {
			return {
				searchKeyword: '',
				currentTab: 0,
				showFilter: false,
				tabs: [
					{ name: '全部患者', count: 58 },
					{ name: '今日随访', count: 6 },
					{ name: '待复诊', count: 12 },
					{ name: '高风险', count: 8 }
				],
				filter: {
					riskLevel: '',
					ageRange: '',
					followupStatus: ''
				},
				riskLevels: [
					{ label: '低风险', value: 'low' },
					{ label: '中风险', value: 'medium' },
					{ label: '高风险', value: 'high' }
				],
				ageRanges: [
					{ label: '60岁以下', value: 'below60' },
					{ label: '60-70岁', value: '60to70' },
					{ label: '70岁以上', value: 'above70' }
				],
				followupStatus: [
					{ label: '待随访', value: 'pending' },
					{ label: '已随访', value: 'done' },
					{ label: '随访超时', value: 'overdue' }
				],
				patientList: [
					{
						id: '1001',
						patientId: 'P2023001',
						name: '张三',
						gender: '男',
						age: 65,
						avatar: '',
						diagnosis: '脑梗塞 (恢复期)',
						lastVisit: '2023-05-15',
						riskLevel: 'medium',
						phone: '13800138000'
					},
					{
						id: '1002',
						patientId: 'P2023002',
						name: '李四',
						gender: '女',
						age: 72,
						avatar: '',
						diagnosis: '脑卒中 (急性期)',
						lastVisit: '2023-05-20',
						riskLevel: 'high',
						phone: '13900139000'
					},
					{
						id: '1003',
						patientId: 'P2023003',
						name: '王五',
						gender: '男',
						age: 58,
						avatar: '',
						diagnosis: '短暂性脑缺血发作',
						lastVisit: '2023-05-10',
						riskLevel: 'low',
						phone: '13700137000'
					},
					{
						id: '1004',
						patientId: 'P2023004',
						name: '赵六',
						gender: '男',
						age: 67,
						avatar: '',
						diagnosis: '高血压 (III级) + 糖尿病',
						lastVisit: '2023-05-18',
						riskLevel: 'medium',
						phone: '13600136000'
					}
				]
			}
		},
		methods: {
			switchTab(index) {
				this.currentTab = index;
				// 在实际项目中，此处应该根据选项卡进行数据筛选
			},
			handleSearch() {
				// 实现搜索逻辑
				console.log('搜索关键词:', this.searchKeyword);
			},
			clearSearch() {
				this.searchKeyword = '';
			},
			resetFilter() {
				this.filter = {
					riskLevel: '',
					ageRange: '',
					followupStatus: ''
				};
			},
			applyFilter() {
				console.log('应用筛选:', this.filter);
				this.showFilter = false;
				// 实现筛选逻辑
			},
			getRiskClass(level) {
				const classes = {
					low: 'risk-low',
					medium: 'risk-medium',
					high: 'risk-high'
				};
				return classes[level] || '';
			},
			getRiskText(level) {
				const texts = {
					low: '低风险',
					medium: '中风险',
					high: '高风险'
				};
				return texts[level] || '未知';
			},
			goToPatientDetail(id) {
				uni.navigateTo({
					url: `/pages/doctor/patient-detail?id=${id}`
				});
			},
			callPatient(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					fail: () => {
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						});
					}
				});
			},
			messagePatient(id) {
				uni.navigateTo({
					url: `/pages/consultation/chat?patientId=${id}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 20rpx;
	}
	
	.search-bar {
		background-color: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		
		.search-box {
			flex: 1;
			height: 80rpx;
			background-color: #f5f5f5;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			margin-right: 20rpx;
			
			input {
				flex: 1;
				height: 100%;
				font-size: 28rpx;
				margin: 0 20rpx;
			}
		}
		
		.filter-btn {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.tabs {
		display: flex;
		background-color: #fff;
		padding: 0 20rpx;
		border-bottom: 2rpx solid #f5f5f5;
		
		.tab-item {
			flex: 1;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #606266;
			position: relative;
			
			.count {
				font-size: 24rpx;
				color: #909399;
				margin-left: 6rpx;
			}
			
			&.active {
				color: #3c9cff;
				font-weight: bold;
				
				&:after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 6rpx;
					background-color: #3c9cff;
					border-radius: 3rpx;
				}
			}
		}
	}
	
	.patient-list {
		padding: 20rpx;
		
		.patient-item {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: flex-start;
			
			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: #f5f5f5;
			}
			
			.info {
				flex: 1;
				margin-left: 20rpx;
				margin-right: 20rpx;
				
				.name-row {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					
					.name {
						font-size: 32rpx;
						font-weight: bold;
						color: #303133;
						margin-right: 20rpx;
					}
					
					.tag {
						font-size: 22rpx;
						padding: 2rpx 10rpx;
						border-radius: 4rpx;
						margin-right: 10rpx;
						
						&.male {
							background-color: #e1f3ff;
							color: #3c9cff;
						}
						
						&.female {
							background-color: #fde6ea;
							color: #fa3a51;
						}
					}
					
					.age {
						font-size: 24rpx;
						color: #606266;
					}
				}
				
				.id-row {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					
					.id-label {
						font-size: 24rpx;
						color: #909399;
					}
					
					.id-value {
						font-size: 24rpx;
						color: #606266;
						margin-left: 10rpx;
					}
				}
				
				.diagnosis-row {
					margin-bottom: 10rpx;
					
					.diagnosis {
						font-size: 26rpx;
						color: #303133;
					}
				}
				
				.meta-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.time {
						font-size: 24rpx;
						color: #909399;
					}
					
					.risk {
						font-size: 24rpx;
						padding: 2rpx 10rpx;
						border-radius: 4rpx;
						
						&.risk-low {
							background-color: #e5f7ed;
							color: #19be6b;
						}
						
						&.risk-medium {
							background-color: #fdf6ec;
							color: #ff9900;
						}
						
						&.risk-high {
							background-color: #fef0f0;
							color: #fa3a51;
						}
					}
				}
			}
			
			.actions {
				display: flex;
				flex-direction: column;
				
				.action-btn {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 20rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		
		image {
			width: 240rpx;
			height: 240rpx;
			margin-bottom: 40rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #909399;
		}
	}
	
	.filter-popup {
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx;
		
		.filter-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #f5f5f5;
			
			text {
				font-size: 32rpx;
				font-weight: bold;
			}
			
			view {
				display: flex;
				align-items: center;
				
				text {
					font-size: 28rpx;
					color: #909399;
					font-weight: normal;
					margin-left: 10rpx;
				}
			}
		}
		
		.filter-section {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #f5f5f5;
			
			&:last-child {
				border-bottom: none;
			}
			
			.section-title {
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			
			.tag-list {
				display: flex;
				flex-wrap: wrap;
				
				.filter-tag {
					padding: 10rpx 30rpx;
					background-color: #f5f5f5;
					font-size: 26rpx;
					color: #606266;
					border-radius: 30rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					
					&.active {
						background-color: #e1f3ff;
						color: #3c9cff;
					}
				}
			}
		}
		
		.filter-actions {
			display: flex;
			margin-top: 30rpx;
			
			.cancel-btn, .confirm-btn {
				flex: 1;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				border-radius: 40rpx;
			}
			
			.cancel-btn {
				background-color: #f5f5f5;
				color: #606266;
				margin-right: 20rpx;
			}
			
			.confirm-btn {
				background-color: #3c9cff;
				color: #fff;
			}
		}
	}

	//添加底部安全区域样式
	.safe-area-bottom {
		height: calc(100rpx + env(safe-area-inset-bottom));
	}
</style> 